<template>
	<view class="cash-withdrawal">
		<!-- <div class="pos-order-list">
			<view class="nav acea-row row-around row-middle">
				<view v-for="(item, navListIndex) in navList" class="item" :class="currentTab === navListIndex ? 'on' : ''" @click="swichNav(navListIndex, item)"
				 :key="navListIndex">{{item.name}}</view>
			</view>
		</div> -->
		<view class="wrapper">
			<view :hidden="currentTab !== 0" class="list">
				<view class="item acea-row row-between-wrapper">
					<view class="name">微信号</view>
					<view class="input">
						<input placeholder="请输入微信号" v-model="post.weixin" disabled />
					</view>
				</view>
				<view class="item acea-row row-between-wrapper">
					<view class="name">提现</view>
					<view class="input">
						<input :placeholder="'最低提现积分' + minPrice" v-model="post.money" />
					</view>
				</view>
				<view class="tip">当前可提现积分: {{ commissionCount }}</view>
				<view class="bnt bg-color-black" @click="submitted">提现</view>
			</view>

			<view :hidden="currentTab !== 1" class="list">
				<!-- <view class="item acea-row row-between-wrapper">
					<view class="name">真实姓名</view>
					<view class="input">
						<input placeholder="请填写开户行姓名" v-model="post.bankUserName" disabled />
					</view>
				</view>
				<view class="item acea-row row-between-wrapper">
					<view class="name">开户行名称</view>
					<view class="input">
						<input placeholder="请填写开户行名称" v-model="post.bankName" disabled />
					</view>
				</view>
				<view class="item acea-row row-between-wrapper">
					<view class="name">银行账号</view>
					<view class="input">
						<input type="number" placeholder="请填写您的银行账号" disabled v-model="post.bankCode" />
					</view>
				</view> -->
				<view class="item acea-row row-between-wrapper">
					<view class="name">提现金额</view>
				</view>

				<view class="item acea-row row-between-wrapper">
					<!-- <view class="name">提现</view> -->
					<view class="input">
						<span>￥</span>
						<input placeholder="0.00" v-model="post.money" @confirm="submitted" />
					</view>
				</view>
				<view class="tip">
					<span>当前可提现积分: {{ commissionCount }}</span>
					<span class="cashRecord" @click="goCashRecord()">提现记录</span>
				</view>
				<!-- <view class="radio_group_row">
					<radio-group @change="radioChange">
						<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in items" :key="item.value">
							<view>
								<radio :value="item.value" :checked="index === current" />
							</view>
							<view>{{item.name}}</view>
						</label>
					</radio-group>
				</view> -->
				<button class="bnt bg-color-black" @click="submitted" :disabled="isDisable" >确认提现</button>
				
				<view class="remarks-box">
					<text>
						1、已绑定银行卡号，确保本人真实姓名和开户行账户真实有效再提现，如发现银行卡号有误，请到个人中心重新绑定。
					</text>
					<br />
					<text>
						2、单笔提现不低于100元，到账时间24~72/小时，提现时间周一到周五。
					</text>
					<br />
					<text>
						3、提现综合服务费为单笔金额的{{ extractRate }}%
					</text>
				</view>
			</view>


			<view :hidden="currentTab !== 2" class="list">
				<view class="item acea-row row-between-wrapper">
					<view class="name">用户名</view>
					<view class="input">
						<input placeholder="请填写您的支付宝用户名" v-model="post.name" />
					</view>
				</view>
				<view class="item acea-row row-between-wrapper">
					<view class="name">账号</view>
					<view class="input">
						<input placeholder="请填写您的支付宝账号" v-model="post.alipay_code" />
					</view>
				</view>
				<view class="item acea-row row-between-wrapper">
					<view class="name">提现</view>
					<view class="input">
						<input :placeholder="'最低提现金额 ' + minPrice" v-model="post.money" />
					</view>
				</view>
				<view class="tip">当前可提现金额: {{ commissionCount }}</view>
				<view class="bnt bg-color-black" @click="submitted">提现</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		mapGetters
	} from "vuex";
	import {
		getBank,
		postCashInfo,
		getUserInfo
	} from "@/api/user";
	import {
		required
	} from "@/utils/validate";
	import {
		validatorDefaultCatch
	} from "@/utils/dialog";
	import {
		interval
	} from '@/utils'
	export default {
		name: "UserCash",
		components: {},
		props: {},
		data: function() {
			return {
				navList: [
					// {
					// 	name: "微信提现",
					// 	type: "weixin",
					// 	icon: "icon-weixin2"
					// },
					// {
					// 	name: "支付宝",
					// 	type: "alipay",
					// 	icon: "icon-icon34"
					// },
					{
						name: "银行卡",
						type: "bank",
						icon: "icon-icon34"
					}
				],
				items: [{
						value: 'bank',
						name: '银行卡',
						checked: 'true'
					},
					{
						value: 'weixin',
						name: '微信零钱'
					}
				],
				current: 0,
				post: {
					extract_type: "bank",
					alipay_code: "",
					bankCode: "",
					money: "",
					name: "",
					bankName: "",
					cardnum: "",
					weixin: "",
					bankUserName: ''

				},
				currentTab: 1,
				minPrice: 0,
				banks: [],
				commissionCount: 0,
				newMoney: 0,
				extractRate: 0,
				isDisable: false
			};
		},
		computed: mapGetters(["userInfo"]),
		mounted: function() {
			this.extractRate = this.$store.getters.extractRate
		},
		methods: {
			radioChange: function(evt) {
				for (let i = 0; i < this.items.length; i++) {
					if (this.items[i].value === evt.detail.value) {
						this.current = i;
						console.log(this.current)
						break;
					}
				}
			},
			swichNav: function(index, item) {
				this.currentTab = index;
				this.post.extract_type = item.type;
			},
			goCashRecord() {
				this.$yrouter.push("/pages/user/promotion/CashRecord/index");
			},
			getBank: function() {
				let that = this;
				getBank().then(
					res => {
						that.banks = res.data.extractBank;
						that.minPrice = res.data.minPrice;
						that.commissionCount = interval(res.data.commissionCount);
						that.newMoney = res.data.commissionCount
					},
					function(err) {
						uni.showToast({
							title: err.msg || err.response.data.msg || err.response.data.message,
							icon: "none",
							duration: 2000
						});
					}
				);
			},
			async submitted() {
				this.isDisable = true
				setTimeout(()=>{
				   this.isDisable = false   //点击一次时隔两秒后才能再次点击
				},2000)
				
				let bankName = this.post.bankName,
					alipay_code = this.post.alipay_code,
					money = this.post.money,
					name = this.post.name,
					bankCode = this.post.bankCode,
					cardnum = this.post.cardnum,
					weixin = this.post.weixin,
					bankUserName = this.post.bankUserName,
					validateBankCard = /^(\d{16}|\d{19})$/,
					validateBankName = /^[\u4e00-\u9fa5]{4,12}$/,
					that = this;
				if (that.post.extract_type == "bank") {
					if (!validateBankCard.test(bankCode)) {
						uni.showToast({
							title: "请输入正确的银行账号",
							icon: "none",
							duration: 2000
						});
						return
					}
					if (!validateBankName.test(bankName)) {
						uni.showToast({
							title: "请输入正确的银行名称",
							icon: "none",
							duration: 2000
						});
						return
					}
				}

				if (
					parseFloat(money) > parseFloat(that.newMoney) ||
					parseFloat(that.newMoney) == 0
				) {
					uni.showToast({
						title: "余额不足",
						icon: "none",
						duration: 2000
					});
					return
				}
				if (parseFloat(money) < parseFloat(that.minPrice)) {
					uni.showToast({
						title: "最低提现金额" + that.minPrice,
						icon: "none",
						duration: 2000
					});
					return
				}
				switch (that.post.extract_type) {
					case "alipay":
						// if (!name) {
						//   uni.showToast({
						//     title: "请输入支付宝用户名",
						//     icon: "none",
						//     duration: 2000
						//   });
						//   return;
						// }
						// if (!alipay_code) {
						//   uni.showToast({
						//     title: "请输入支付宝账号",
						//     icon: "none",
						//     duration: 2000
						//   });
						//   return;
						// }
						// if (!money) {
						//   uni.showToast({
						//     title: "请输入提现金额",
						//     icon: "none",
						//     duration: 2000
						//   });
						//   return;
						// }
						try {
							await this.$validator({
								name: [required(required.message("支付宝用户名"))],
								alipay_code: [required(required.message("支付宝账号"))],
								money: [required(required.message("提现金额"))]
							}).validate({
								name,
								alipay_code,
								money
							});
							uni.showLoading({
								title: "加载中"
							});
							let save = {
								extractType: that.post.extract_type,
								alipayCode: alipay_code,
								name: name,
								money: money
							};
							that.save(save);
						} catch (e) {
							return validatorDefaultCatch(e);
						}
						break;
					case "weixin":
						try {
							await this.$validator({
								weixin: [required(required.message("提现微信号"))],
								money: [required(required.message("提现金额"))]
							}).validate({
								weixin,
								money
							});
							uni.showLoading({
								title: "加载中"
							});
							let save = {
								extractType: that.post.extract_type,
								weixin: weixin,
								money: money
							};
							that.save(save);
						} catch (e) {
							return validatorDefaultCatch(e);
						}
						break;

					case "bank":
						try {
							await this.$validator({
								bankCode: [required(required.message("银行账户"))],
								bankName: [required(required.message("银行名称"))],
								money: [required(required.message("提现金额"))],
								bankUserName: [required(required.message("真实姓名"))]
							}).validate({
								bankCode,
								bankName,
								money,
								bankUserName
							});

							uni.showLoading({
								title: "加载中"
							});
							
							
							let save = {
								extractType: that.post.extract_type,
								bankCode: bankCode,
								bankName: bankName,
								money: money,
								bankUserName
							};
							
							await that.save(save);
							
						} catch (e) {
							return validatorDefaultCatch(e);
						}
						break;
				}
			},
			save: function(info) {
				// return
				console.log('提现信息')
				console.log(info)
				postCashInfo(info).then(
					res => {
						uni.hideLoading();
						uni.showToast({
							title: res.msg,
							icon: "none",
							duration: 2000
						});
						let _money = info.money - (info.money * this.extractRate)/100
						
						this.$yrouter.push({
							path: "/pages/user/promotion/CashAudit/index",
							query: {
								money: _money,
							},
						});
					},
					err => {
						uni.hideLoading();
						uni.showToast({
							title: err.msg || err.response.data.msg || err.response.data.message,
							icon: "none",
							duration: 2000
						});
					}
				);
			},
			getUser() {
				getUserInfo().then(res => {
						console.log(res.data)
						this.post.weixin = res.data.phone;
						this.post.bankUserName = res.data.bankUserName;
						this.post.bankName = res.data.bankName;
						this.post.bankCode = res.data.bankCode;
						if (res.data.bankCode == '' || res.data.cardId == '') {
							console.log("没有绑定银行卡")
							uni.showModal({
								title: '提示',
								content: '您的账户还没有绑定银行卡或身份证，请前往个人中心设置后再操作！',
								success: function(res) {
									if (res.confirm) {
										uni.navigateTo({
											url: '/pages/user/PersonalData/index'
										});
									} else if (res.cancel) {
										uni.navigateBack(1)
									}
								}
							});
						} else {
							console.log("已设置支付密码")
						}
					})
					.catch(error => {
						console.log('获取用户信息失败')
						reject('获取用户信息失败')
					})
			}
		},
		onShow() {
			this.getBank();
			this.getUser();
		},
		onHide() {
			console.log('离开用户中心')
			this.post.money = ''
		},
	};
</script>
<style lang="less">
	page {
		background: #FFFFFF;
	}

	.pos-order-list {
		height: 90rpx;
	}
	
	.radio_group_row{
		margin-top: 40rpx;
		overflow: hidden;
		display: block;
	}
	
	.uni-list-cell{
		width: 220rpx;
		display: block;
		float: left;
		
		view{
			float: left;
			display: inline-block;
		}
	}

	.cash-withdrawal {
		padding-top: 0rpx;
	}

	.cashRecord {
		float: right;
		color: #ff3334;
	}

	.cash-withdrawal .pos-order-list .nav .item.on {
		color: #eb3729
	}

	.row-between-wrapper {
		.input {
			span {
				float: left;
				font-size: 60rpx;
			}

			input {
				font-size: 60rpx;
				padding: 6rpx 0 0 15rpx;
				height: 80rpx;
			}
		}
	}

	.remarks-box {
		width: 100%;
		padding: 30rpx 30rpx;

		text {
			color: #e45050;
			font-size: 28rpx;
			font-weight: bold;
		}
	}

	.bg-color-black {
		border-radius: 10rpx !important;
		background-color: #e45050 !important
	}
</style>
